<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>公示通知管理</title>
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/marked.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/addnews.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/github-markdown.css}"/>
</head>
<body>
<table id="newslist" lay-filter="newsTable"></table>
<div id="editDiv" style="display: none">
    <form class="layui-form layui-form-pane">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="nid" id="nid" onfocus="blur()" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">新闻标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="ntitle" id="ntitle" lay-verify="required" placeholder="请输入"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">编辑人</label>
                    <div class="layui-input-block">
                        <input type="text" name="nauthor" id="nauthor" lay-verify="required" placeholder="请输入"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <div class="layui-block">
                        <label class="layui-form-label">日期选择</label>
                        <div class="layui-input-block">
                            <input type="text" name="ntime" id="ntime" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="layui-row">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header">编辑区</div>
                <div class="layui-card-body">
                    <textarea id="ncontent" name='ncontent' rows=1 cols=40
                              style='overflow:scroll;overflow-y:hidden;overflow-x:hidden;width: 100%;resize:none;'
                              onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);"
                              onblur="clearInterval(this.clock);"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header">预览区</div>
                <div class="layui-card-body">
                    <div id="viewframe" class="markdown-body" style="display: block;width: 100%;height: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="barBtn">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['jquery', 'layer', 'form', 'table', 'laydate'], function () {
        var $ = layui.$ //重点处
            , layer = layui.layer
            , form = layui.form
            , table = layui.table
            , layer = layui.layer
            , laydate = layui.laydate;
        $("#ncontent").on('keyup', function () {
            $('#viewframe').html(marked($(this).val()));
        });
        laydate.render({
            elem: '#ntime',
            type: 'datetime'
        });
        //获取分页数据列表
        table.render({
            elem: '#newslist'
            , url: '/news/findallnews'
            , cols: [
                [
                    {field: 'nid', width: 100, title: '新闻ID', sort: true}
                    , {field: 'ntitle', title: '新闻标题'}
                    , {field: 'ncontent', width: 200, title: '新闻内容'}
                    , {field: 'nauthor', title: '新闻作者'}
                    , {
                    field: 'ntime', title: '发布时间', templet: function (d) {
                        return fDate(d.ntime);
                    }
                }
                    , {fixed: 'right', title: '操作', toolbar: '#barBtn', width: 150}
                ]
            ]
            , page: true
            , even: true
        });
        //监听工具条
        table.on('tool(newsTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                $('#nid').val(data.nid);
                $('#ntitle').val(data.ntitle);
                $('#nauthor').val(data.nauthor);
                $('#ntime').val(fDate(data.ntime));
                $('#ncontent').val(data.ncontent);
                $("#ncontent").trigger('keyup');
                layer.open({
                    type: 1,
                    maxmin: true,
                    area: ['800px', '500px'],
                    title: '编辑：' + data.ntitle,
                    content: $('#editDiv'),
                    btn: ['提交修改', '取消'],
                    yes: function (index) {
                        $.ajax({
                            type: 'post',
                            url: '/news/editingnews',
                            data: {
                                nid: $('#nid').val(),
                                ntitle: $('#ntitle').val(),
                                nauthor: $('#nauthor').val(),
                                ncontent: $('#ncontent').val(),
                                ntime: $('#ntime').val()
                            },
                            success: function (data) {
                                if (data == true) {
                                    layer.open({
                                        content: '已成功更新数据！',
                                        yes: function (index) {
                                            layer.close(index);
                                            window.location.reload();
                                        }
                                    });
                                } else {
                                    layer.msg('更新失败，请稍后重试！');
                                }
                            }
                        });
                    }
                });
                $("#ncontent").focus();
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除吗？', function (index) {
                    $.ajax({
                        type: 'post',
                        url: '/news/deletenews',
                        data: {
                            nid: data.nid
                        },
                        success: function (deldata) {
                            if (deldata == true) {
                                obj.del();
                                layer.open({
                                    content: '删除成功！',
                                    yes: function (index) {
                                        layer.close(index);
                                    }
                                });
                            } else {
                                layer.msg('删除失败，请稍后重试！');
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });

        /**
         * 转换时间格式
         */
        function fDate(date) {
            var d = new Date(date);
            var month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
            var day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
            var hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
            var min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
            var sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
            var times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
            return times
        }
    });
</script>